<template>
  <div class="w_h_100">
    <div class="inlet">待办任务 >{{ category == '1' ? '融资单笔待办' : "非融单笔待办" }} > {{ type == '1' ? '保前' : '保后' }} > <span
        class="size">项目处理</span></div>
    <div class="d_f index">
      <div class="left">
        <div class="box">
          <div class="d_f j_c_s_b a_i_c">
            <div>客户资料卡</div>
            <!-- <el-icon >
              <Fold class="icon" size="4" />
            </el-icon> -->
          </div>
          <div class="d_f a_i_c m_t_20">
            <div class="label ">客户名称：</div>
            <div class="input d_f a_i_c">
              <div class="customerName">{{ information.customerName }}</div>
              <div class="success_status" v-if="information.customerStatus == 0">
                                <img src="../../../assets/normal.png" alt="" class="status_img">
                                <span>正常</span>
                            </div>
                            <div class="success_status" v-if="information.customerStatus == 1">
                                <img src="../../../assets/normal.png" alt="" class="status_img">
                                <span>在途</span>
                            </div>
                            <div class="pause_status" v-if="information.customerStatus == 2">
                                <img src="../../../assets/pause.png" alt="" class="status_img">
                                <span>暂停</span>
                            </div>
                            <div class="settle_status" v-if="information.customerStatus == 3">
                                <img src="../../../assets/settle.png" alt="" class="status_img">
                                <span>结清</span>
                            </div>
                            <div class="settle_status" v-if="information.customerStatus == 4">
                                <img src="../../../assets/settle.png" alt="" class="status_img">
                                <span>解保</span>
                            </div>
                            <div class="abnormal_status" v-if="information.customerStatus == 5">
                                <img src="../../../assets/abnormal.png" alt="" class="status_img">
                                <span>逾期</span>
                            </div>
                            <div class="extension_status" v-if="information.customerStatus == 6">
                                <img src="../../../assets/extension.png" alt="" class="status_img">
                                <span>展期</span>
                            </div>
                            <div class="noRead_status1" v-if="information.customerStatus == 7">
                                <img src="../../../assets/noRead.png" alt="" class="status_img">
                                <span>预警</span>
                            </div>
                            <div class="compensation_status" v-if="information.customerStatus == 8">
                                <img src="../../../assets/compensation.png" alt="" class="status_img">
                                <span>代偿</span>
                            </div>
            </div>

          </div>
          <div class="d_f a_i_c m_t_20">
            <div class="label ">项目编号：</div>
            <div class="input d_f a_i_c projectNo">{{ information.projectNo }}</div>
          </div>
          <div class="d_f a_i_c m_t_20">
            <div class="label ">当前任务：</div>
            <div class="input d_f a_i_c task">{{ information.nodeName }}</div>
          </div>
          <div class="d_f a_i_c m_t_20">
            <div class="label ">产品名称：</div>
            <div class="input d_f a_i_c">{{ information.productName }}</div>
          </div>
          <div class="d_f a_i_c m_t_20">
            <div class="label ">合作机构：</div>
            <div class="input d_f a_i_c">{{ information.agencyName }}</div>
          </div>
          <div class="d_f a_i_c m_t_20">
            <div class="label ">进件人：</div>
            <div class="input d_f a_i_c">{{ information.submitter }}</div>
          </div>
          <div class="d_f a_i_c m_t_20">
            <div class="label ">进件人电话：</div>
            <div class="input d_f a_i_c">{{ information.submitterMobile }}</div>
          </div>
          <div class="d_f a_i_c m_t_20">
            <div class="label ">业务部门：</div>
            <div class="input d_f a_i_c">{{ information.deptName }}</div>
          </div>
          <div class="d_f a_i_c m_t_20">
            <div class="label ">担保金额：</div>
            <div class="input d_f a_i_c">{{ information.totalMoney || '0' }}</div>
          </div>
        </div>
        <singleStrokeFiling></singleStrokeFiling>
      </div>
      <div class="right" v-if="type == '1'">
        <div class="d_f">
          <div v-for="(item, index) in list" :key="index" class="tab d_f j_c_c a_i_c" @click="current = index"
            :class="{ 'm_l_10': index > 0, 'active': current == index }">{{ item.name }} </div>
        </div>
        <div v-if="current == 0" style="height: calc(100% - 60px);">
          <div class="forms">
            <template v-for="item in records">
              <component class="m_t_20" :isAudit="isAudit" :code="item.code" :productId="information.productId"
                :is="FormComponents[item.tag]" :projectId="model.projectId" :nodeObj="nodeObj"
                :isEnabled="item.isEnabled" :vars="vars" ref="itemRefs" type="useForm" />
            </template>
          </div>
          <div class="bottom d_f j_c_s_b" v-if="records.length > 0">
            <div></div>
            <div>
              <el-button @click="close" v-hasPerm="'backSingleFinancingFront'" v-if="canBack==1">回 退</el-button>
              <el-button type="primary" plain @click="preserve" v-hasPerm="'saveSingleFinancingFront'">保 存</el-button>
              <el-button type="primary" @click="save()" v-hasPerm="'submitSingleFinancingFront'">提
                交</el-button>
            </div>
          </div>
        </div>
        <div class="form1" v-if="current == 2">
          <businessInformation></businessInformation>
        </div>
        <div class="form1" v-if="current == 1">
          <beforeInsurance></beforeInsurance>
        </div>
        <div v-if="current == 3" class="form1">
          <financialStatements :nodeId="information.nodeId" :nodeName="information.nodeName"></financialStatements>
        </div>
      </div>
      <div class="right" v-else>
        <div class="d_f">
          <div v-for="(item, index) in list1" :key="index" class="tab d_f j_c_c a_i_c" @click="current = index"
            :class="{ 'm_l_10': index > 0, 'active': current == index }">{{ item.name }} </div>
        </div>
        <div v-if="current == 0" style="height: calc(100% - 60px);">
          <div class="forms">
            <template v-for="item in records">
              <component class="m_t_20" :isAudit="isAudit"  :code="item.code" :productId="information.productId"
                :is="FormComponents[item.tag]" :projectId="model.projectId" :nodeObj="nodeObj"
                :isEnabled="item.isEnabled" :vars="vars" ref="itemRefs" type="useForm" />
            </template>
          </div>
          <div class="bottom d_f j_c_s_b" v-if="records.length > 0">
            <div></div>

            <div>
              <el-button @click="close" v-if="canBack==1" v-hasPerm="'backSingleFinancingBehind'">回 退</el-button>
              <el-button type="primary" plain @click="preserve" v-myRepeat v-hasPerm="'saveSingleFinancingBehind'">保
                存</el-button>
              <el-button type="primary" @click="save()" v-myRepeat v-hasPerm="'submitSingleFinancingBehind'">提
                交</el-button>
            </div>
          </div>
        </div>
        <div v-if="current == 1" class="form1">
          <beforeInsurance></beforeInsurance>
        </div>
        <div v-if="current == 2" class="form1">
          <afterProtection></afterProtection>
        </div>
        <div v-if="current == 3" class="form1">
          <businessInformation></businessInformation>
        </div>
        <div v-if="current == 4" class="form1">
          <financialStatements :nodeId="information.nodeId" :nodeName="information.nodeName"></financialStatements>
        </div>
      </div>
    </div>
    <component class="m_t_20" :is="FormComponents['ryfp']" v-if="taskId" :isEnabled="1" ref="ryfp" type="useForm"
      @resultData="resultData" />
  </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onBeforeMount, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { runTaskGet, runTaskAudit, runTaskCustomer, runTaskAssign, runTaskStash } from '../../../api/agent'
import { FormComponents } from '../../../components/formChildren/myComponents'
import { CloseBold, Fold, Expand } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'
import { Message } from '../../../utils/resetMessage'
import { useStore } from '../../../store/index'
import beforeInsurance from '../../../components/info/beforeInsurance.vue'//保前信息
import afterProtection from '../../../components/info/afterProtection.vue'//保后信息
import businessInformation from '../../../components//info/businessInformation.vue'//业务资料信息
import singleStrokeFiling from '../../../components/info/singleStrokeFiling.vue'
import financialStatements from '../../../components/info/financialStatements.vue'
import { noFinancingSingleNodeType } from '../../../type/agent'
export default defineComponent({
  name: '',
  components: {
    CloseBold, beforeInsurance, afterProtection, businessInformation, singleStrokeFiling, Expand, Fold,financialStatements
  },
  setup() {
    const store = useStore();
    const data:noFinancingSingleNodeType = reactive({
      list: [
        {
          name: '项目处理',
          id: '0',
        },
        {
          name: '保前信息',
          id: '1',
        },
        {
          name: '业务资料',
          id: '3',
        },
        {
          name: '财务报表',
          id: '4',
        },
      ],
      list1: [
        {
          name: '项目处理',
          id: '0',
        },
        {
          name: '保前信息',
          id: '1',
        },
        {
          name: '保后信息',
          id: '2',
        },
        {
          name: '业务资料',
          id: '3',
        },
        {
          name: '财务报表',
          id: '4',
        },
      ],
      current: 0,
      records: [],
      vars: '',
      nodeObj: {
           id: '',
        name: ''
      },
      model: {
        projectId: '',
        type: '1',
        nodeId:''
      },
      type: '1',
      information: {
        customerName: '',
        customerStatus: 0,
        projectNo: '',
        nodeName: '',
        productName: '',
        agencyName: '',
        submitter: '',
        submitterMobile: '',
        deptName: '',
        totalMoney: '',
        nodeId: '',
        productId: '',
      },
      taskId: '',
      ids: [],
      category: '1',
      isAudit: false,
      bizTag: '',
      canBack:0,
    })
    onBeforeMount(() => {
      data.model.projectId = route.query.projectId as string
      data.type = route.query.type as string
      data.category = route.query.category as string
      methods.getData()
    })
    const route = useRoute()
    const router = useRouter()
    const itemRefs = ref([])
    const ryfp = ref()
    const methods = {
      getData() {
        runTaskGet({ id: route.query.id as string, type: route.query.type as string, category: route.query.category as string }).then((res: any) => {
          data.vars = res.vars
          data.bizTag = res.bizTag
          data.isAudit = res.isAudit == 0 ? false : true
          data.canBack=res.canBack
          // data.records =[{tag:'fzBhjcjhb',isEnabled:1}].concat(res.formCodes) 
          res.formCodes.map(item => {
            if (item.category == 1) {
              item.code = item.tag
              item.tag = 'customize'
            }
          })
          data.records = res.formCodes
        })
        runTaskCustomer({ id: route.query.id as string, category: route.query.category as string }).then((res: any) => {
          data.information = res
          data.nodeObj = {
            name: res.nodeName,
            id: res.nodeId
          }
        })
      },
      close() {
        ElMessageBox.confirm(
          '当前信息将不再保存?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
          .then(() => {
            runTaskAudit({ id: route.query.id as string, approveProcess: { status: 4, } }).then((res: any) => {
              methods.back()
            })
          })
      },
      back() {
        router.go(-1)
        store.deletePath('/agent/singleFinancing/nodeProcessing')
      },
      save() {
        let arr = []
        console.log(itemRefs.value);
        itemRefs.value.map((item: any, index: number) => {
          item.resultData().then((res: any) => {
            arr.push(true)
            data.model = Object.assign(res, data.model);
          }).catch((err) => {
            arr.push(false)
          })
        })
        setTimeout(() => {
          console.log(arr, itemRefs.value.length);
          if (arr.every((em: any) => em) && arr.length == itemRefs.value.length) {
            methods.submit()

          }
          if (arr.length != itemRefs.value.length) {
            Message({ type: 'error', message: '表单有未通过校验，请检查表单配置' })
          }
        }, 300)
      },
      preserve() {
        let arr = []
        itemRefs.value.map((item: any, index: number) => {
          item.saveData().then((res: any) => {
            arr.push(true)
            data.model = Object.assign(res, data.model);

          }).catch((err) => {
            arr.push(false)
          })
        })
        setTimeout(() => {
          if (arr.every((em: any) => em) && arr.length == itemRefs.value.length) {
            methods.saveForms()
          }
        }, 300)
      },
      //保存表单信息
      saveForms() {
        runTaskStash({ id: route.query.id as string, vars: data.model }).then(() => {
          Message({ type: 'success', message: '保存成功' })
          // methods.back()
        })
      },
      //提交表单信息
      submit() {
        data.model.type = data.category
        data.model.nodeId = route.query.nodeId as string
        runTaskAudit({ id: route.query.id as string, bizTag: data.bizTag, biz: data.model, approveProcess: { status: 2, }, flowInstId: route.query.flowInstId as string }).then((res: any) => {
          Message({ type: 'success', message: '提交成功' })
          if (res.length == 0) {
            methods.back()
          } else {
            data.ids = res
            data.taskId = res[0]
          }
        })
      },
      resultData(val) {
        runTaskAssign({ taskId: data.taskId, empId: val.empId }).then(() => {
          Message({ type: 'success', message: '提交成功' })
          ryfp.value.clearValue()
          data.ids = data.ids.filter((item: any) => {
            return item != data.taskId
          })
          if (data.ids.length > 0) {
            data.taskId = data.ids[0]
          } else {
            methods.back()
          }
        })
      }
    }
    return {
      ...toRefs(data),
      ...methods, FormComponents, itemRefs, ryfp
    }
  }
})
</script>
<style scoped lang='scss'>
.index {
  width: 100%;
  height: calc(100% - 40px);
  margin-top: 10px;
}

.left {
  width: 370px;
  height: 100%;
  overflow-y: auto;

  .box {
    background: linear-gradient(178deg, #F5F9FF 0%, #FFFFFF 62%);
    box-sizing: border-box;
    border: 1px solid;
    border-image: linear-gradient(168deg, rgba(155, 188, 235, 0.5) 1%, rgba(102, 142, 197, 0) 94%) 1;
    border-radius: 6px;
    box-shadow: 5px 5px 5px -2px rgba(9, 20, 29, 0.03);
    width: 100%;
    padding: 15px;

    .label {
      text-align: right;
      width: 100px;
      color: rgba(0, 0, 0, 0.4);
      font-size: 14px;
      display: block !important;
    }

    .input {
      background: linear-gradient(178deg, #F5F9FF 0%, #FFFFFF 62%);
      width: calc(100% - 120px);
      height: 32px;
      border-radius: 2px;
      background: #fff;
      padding: 0px 12px;
      color: rgba(0, 0, 0, 0.9);
      font-size: 13px;
      word-wrap: break-word; /* 允许在单词内换行 */
  overflow-wrap: break-word; /* 同上，现代浏览器推荐使用这个属性别名 */
  white-space: normal; /* 允许自动换行 */
    }
    .customerName{
      width: 130px;
      word-wrap: break-word; /* 允许在单词内换行 */
  overflow-wrap: break-word; /* 同上，现代浏览器推荐使用这个属性别名 */
  white-space: normal; /* 允许自动换行 */
    }

    .task {
      color: #1878FF !important;
    }
  }
}

.right {
  width: calc(100% - 380px);
  height: 100%;
  margin-left: 10px;
  ;
  border-radius: 6px;

  .tab {
    width: 128px;
    height: 53px;
    border-radius: 6px 6px 0px 0px;
    background: linear-gradient(173deg, #FFFFFF 12%, #F3F3F3 60%);
    box-shadow: 5px 5px 5px -2px rgba(9, 20, 29, 0.03);
    color: #86909C;
    font-size: 16px;
    cursor: pointer;
  }

  .active {
    background: linear-gradient(173deg, #F5F9FF 10%, #FFFFFF 60%) !important;
    color: #1B5ED1 !important;
    box-shadow: 5px 0px 5px -2px rgba(9, 20, 29, 0.03) !important;
  }

  .forms {
    width: calc(100% - 64px);
    height: calc(100% - 115px);
    background: #fff;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);

    padding: 1px 32px 24px 32px;
    overflow-y: auto;
  }

  .form1 {
    width: calc(100% - 64px);
    height: calc(100% - 80px);
    background: #fff;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
    padding: 1px 32px 24px 32px;
    overflow-y: auto;
  }

  .bottom {
    background: #fff;
    padding: 32px;
    width: calc(100% - 64px);
  }

}
</style>